<template>
  <view>
    <u-popup :show="show" @close="cancel" :round="10" mode="center" :closeOnClickOverlay="false">
      <view class="popup-con">
        <view class="applyfor-tit">
          {{tit}}
        </view>
        <view class="applyfor-info">
          <text v-if="textShow">{{info}}</text>
          <u-input v-else :placeholder="info" v-model="modelValue" :type="inputtype"></u-input>
        </view>
        <view class="button-group">
          <button class="cancel-btn" @click="cancel">取消</button>
          <button class="pay-btn" @click="sure">确认</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    computed,
    defineProps,
    defineEmits,
  } from 'vue';
  const props = defineProps({
    showPopup: Boolean,
    titPopup: String,
    infoPopup: String,
    typePopup: String,
    textPopup: {
      type: Boolean,
      default: false,
    },
    inputType: {
      type: String,
      default: 'digit',
    }
  })
  const emit = defineEmits(['cancelPopup', 'surePopup']);
  let show = ref(props.showPopup)
  let tit = ref(props.titPopup)
  let info = ref(props.infoPopup)
  let type = ref(props.typePopup)
  let textShow = ref(props.textPopup)
  let modelValue = ref('')
  let inputtype = ref(props.inputType)
  const cancel = () => {
    emit('cancelPopup', false);
  }
  const sure = () => {
    if (!textShow.value) {
      if (modelValue.value == '') {
        uni.showToast({
          title: `请输入`,
          icon: 'none',
        })
        return
      }
    }
    show.value = false
    emit('surePopup', type.value, modelValue.value);
  }
</script>


<style scoped lang="scss">
  .popup-con {
    width: 330px;
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;

    .applyfor-tit {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 17px;
      box-sizing: border-box;
    }

    .applyfor-info {
      margin: 0 30px;

      text {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        text-align: center;
      }
    }

    .button-group {
      display: flex;
      padding: 0 35px 20px;
      box-sizing: border-box;
      margin-top: 30px;
    }

    .cancel-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #EFEFEF;
      border-radius: 21px;
      margin-right: 30rpx;
      font-weight: 400;
      font-size: 14px;
      color: #222222;

      &::after {
        content: " ";
        border: none;
      }
    }

    .pay-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #0F90FD;
      border-radius: 21px;
      font-weight: 400;
      font-size: 14px;
      color: #fff;

      &::after {
        content: " ";
        border: none;
      }
    }
  }
</style>
